<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" style="padding-bottom:30px;border-bottom:1px solid #e0e2e9">
          <el-col>
            <el-button
              type="primary"
              size="small"
              @click.native="addCategory"
            >添加分类</el-button>
          </el-col>
          <el-col>
            <div>
              <el-input
                v-model="cate.title_contains"
                placeholder="请输入要搜索的标题"
              >
                <template>
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click.native="searchCategory"
                  />
                </template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <template>
            <el-table border :data="category">
              <el-table-column prop="image" label="图片" class="pic" width="320">
                <template #default="{ row }">
                  <img :src="row.image" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="desc" label="介绍" width="480" />
              <el-table-column prop="play" label="操作" width="180">
                <template #default="{ row }">
                  <el-row type="flex" justify="center">
                    <el-button
                      type="primary"
                      size="small"
                      @click="editCate(row.id)"
                    >编辑</el-button>
                    <el-button
                      type="danger"
                      size="small"
                      @click="delBtn(row.id)"
                    >删除</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>

          </template>
        </el-row>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-sizes="[1, 2, 3, 4]"
            layout="total, sizes,prev, pager, next,jumper"
            :total="total"
            :page-size="cate._limit"
            :current-page="currrentPage"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <add-category
        ref="addCate"
        :is-show-add="isShowAdd"
        @closeAdd="closeAdd"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCategory, getCategoryNum, delCategory } from '@/api/category'
import addCategory from './components/addCategory.vue'

export default {
  name: '',
  components: { addCategory },
  data() {
    return {
      currrentPage: 1,
      isShowAdd: false,
      cateId: -1,
      total: 0,
      cate: {
        _limit: 2,
        _start: 0,
        title_contains: ''
      },
      category: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    this.getCategory()
    this.getCategoryNum()
  },
  methods: {
    // 添加分类
    addCategory() {
      this.isShowAdd = true
    },
    // 获取分类总数
    async getCategoryNum() {
      const { data } = await getCategoryNum({
        _limit: 2,
        _start: 0,
        title_contains: this.cate.title_contains
      })
      this.total = data
      console.log(this.total, 103)
    },
    // 获取分类列表
    async getCategory() {
      const res = await getCategory(this.cate)
      this.category = res.data
      console.log(res, 109)
    },
    // 搜索
    async searchCategory() {
      const res = await getCategory({
        _limit: 2,
        _start: 0,
        title_contains: this.cate.title_contains
      })
      this.getCategoryNum()
      console.log(res, 117)
      this.total = res.data.length
      this.category = res.data
    },
    // 页码改变
    async changePage(currenPage) {
      this.cate._start = (currenPage - 1) * this.cate._limit
      await this.getCategory()
    },
    // 分页显示条数改变
    handleSizeChange(pageSize) {
      this.cate._limit = pageSize
      this.cate._start = (this.currrentPage - 1) * this.cate._limit
      this.getCategory()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async closeAdd() {
      await this.getCategoryNum()
      await this.getCategory()
      this.isShowAdd = false
    },
    // 编辑类别
    editCate(id) {
      this.isShowAdd = true
      this.$refs.addCate.cateId = id
    },
    // 删除
    async delBtn(id) {
      await this.$confirm('是否确定删除该分类?')
      if (this.category.length === 1 && this.currrentPage > 0) {
        // this.currrentPage--
        this.cate._start -= this.cate._limit
        console.log(1241234)
      }
      console.log(this.cate._start, 171)
      const res = await delCategory(id)
      console.log(res, 166)
      await this.getCategoryNum()
      await this.getCategory()
      this.$message.success('删除分类成功!')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  ::v-deep .top {
    border-bottom: 1px solid black;
    margin-bottom: 100px;

  }
}
img {
  width: 300px;
  height: 300px;
  object-fit: contain;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
